import { View, Text, ScrollView } from '@tarojs/components'
import './SearchSuggestions.scss'

const SearchSuggestions = ({
  suggestions = [],
  history = [],
  hotWords = [],
  onSelect,
  onRemoveHistory,
  onClearHistory,
  visible = false,
  className = ''
}) => {
  if (!visible) return null

  const handleSelect = (keyword) => {
    onSelect?.(keyword)
  }

  const handleRemoveHistory = (e, keyword) => {
    e.stopPropagation()
    onRemoveHistory?.(keyword)
  }

  const handleClearHistory = (e) => {
    e.stopPropagation()
    onClearHistory?.()
  }

  return (
    <View className={`search-suggestions ${className}`}>
      {/* 搜索建议 */}
      {suggestions.length > 0 && (
        <View className='suggestions-section'>
          <View className='section-header'>
            <Text className='section-title'>搜索建议</Text>
          </View>
          <ScrollView className='suggestions-list' scrollY>
            {suggestions.map((suggestion, index) => (
              <View 
                key={index}
                className='suggestion-item'
                onClick={() => handleSelect(suggestion)}
              >
                <Text className='suggestion-text'>{suggestion}</Text>
              </View>
            ))}
          </ScrollView>
        </View>
      )}

      {/* 搜索历史 */}
      {history.length > 0 && (
        <View className='history-section'>
          <View className='section-header'>
            <Text className='section-title'>搜索历史</Text>
            <Text 
              className='clear-btn'
              onClick={handleClearHistory}
            >
              清除
            </Text>
          </View>
          <ScrollView className='history-list' scrollY>
            {history.map((item, index) => (
              <View 
                key={index}
                className='history-item'
                onClick={() => handleSelect(item)}
              >
                <Text className='history-text'>{item}</Text>
                <Text 
                  className='remove-btn'
                  onClick={(e) => handleRemoveHistory(e, item)}
                >
                  ×
                </Text>
              </View>
            ))}
          </ScrollView>
        </View>
      )}

      {/* 热门搜索 */}
      {hotWords.length > 0 && (
        <View className='hot-section'>
          <View className='section-header'>
            <Text className='section-title'>热门搜索</Text>
          </View>
          <View className='hot-words'>
            {hotWords.map((word, index) => (
              <View 
                key={index}
                className='hot-word'
                onClick={() => handleSelect(word)}
              >
                <Text className='hot-word-text'>{word}</Text>
              </View>
            ))}
          </View>
        </View>
      )}
    </View>
  )
}

export default SearchSuggestions
